* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
}

body {
    min-height: 100vh;
    background: #fff;
}

img {
    display: block;
}

header {
    font-size: 18px;
    color: #323322;
    font-weight: bolder;
    text-align: center;
    padding: 20px 0;
}

main {
    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    padding: 20px;
    margin: 0 auto;
    text-align: center;
}

.main-img {
    position: relative;
    padding: 20px;
    margin: 0 auto 20px;
    border-radius: 4px;
    box-shadow: 1px 1px 8px 1px #dcdcdc;
    overflow: hidden;
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
    background-image:
            linear-gradient(45deg, #ddda 25%, transparent 25%, transparent 75%, #ddda 75%, #ddda),
            linear-gradient(45deg, #ddda 25%, transparent 25%, transparent 75%, #ddda 75%, #ddda);

    .img-container {
        position: relative;
        /* 宽高比为16:9 */
        width: 100%;
        padding-top: 56.25%;
        margin: 0 auto;

        .old-img {
            position: absolute;
            width: 1px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            z-index: 1;
            transition: opacity .48s linear;
        }

        .new-wrap {
            position: absolute;
            width: 50%;
            height: 100%;
            left: 0;
            top: 0;
            overflow: hidden;
            z-index: 10;

            .new-img {
                position: absolute;
                width: 1px;
                z-index: 10;
                transition: opacity .48s linear;
            }
        }

        #control {
            position: absolute;
            width: 30px;
            height: 100%;
            top: 0;
            left: calc(50% - 15px);
            cursor: pointer;
            z-index: 10;

            > div {
                width: 2px;
                height: 100%;
                background: #409eff;
                margin: 0 auto;
            }

            > img {
                position: absolute;
                width: 30px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                z-index: 10;
            }
        }

        .tip {
            position: absolute;
            width: 48px;
            height: 20px;
            top: 0;
            left: calc(50% - 48px);
            display: flex;
            align-items: center;
            justify-content: center;
            background: #409eff80;
            font-size: 13px;
            color: #fff;
            z-index: 10;
        }
    }

    .loading {
        display: none;
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 100;
        background: linear-gradient(#ffffff, #409eff, #ffffff);
        animation: loading 1.4s linear infinite
    }
}

@keyframes loading {
    0% {
        width: 0
    }

    100% {
        width: 100%;
        opacity: 0.1
    }
}





